// 人员下拉搜索主键的创建和使用（模糊搜索用户名、真实姓名、真实姓名拼音码）
<template>
  <div>
    <el-select v-model="id" class="w-100" placeholder="请输入" filterable clearable :filter-method="dataFilter" @change="ch">
      <el-option
        v-for="(item,index) in options"
        :key="index+'options'"
        :value="item.id"
        :label="item.realName"
      />
    </el-select>
  </div>
</template>

<script>
import { getProjectPersonnel } from '@/utils/common'

export default {
  name: 'VProjectPersonnel',
  data() {
    return {
      options: [],
      optionsCopy: [],
      id: null
    }
  },
  created() {
    this.$nextTick(() => {
      this.getPersonnel()
    })
  },
  methods: {
    getPersonnel() {
      getProjectPersonnel().then((rows) => {
        this.options = rows.data.row
        this.optionsCopy = this.options
      })
    },
    dataFilter(val) {
      this.id = val // 吞掉了第一次输入,赋值回给输入框
      if (val) { // val存在
        this.options = this.optionsCopy.filter((item) => {
          if (!!~item.username.indexOf(val) || !!~item.username.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          } else if (!!~item.realName.indexOf(val) || !!~item.realName.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          } else if (!!~item.namePym.indexOf(val) || !!~item.namePym.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.options = this.optionsCopy
      }
    },
    clearData() {
      this.id = null
      // this.options = this.optionsCopy
    },
    ch(val) {
      this.$emit('ch', val)
    }
  }
}
</script>

